import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class Duanzi extends Component {
    //
    state = {
        duanzis: [] // 空数组, 不要写成 空对象 null
    }

    //render 方法调用了几次???
    render() {
        return (
            <div className="duanzi-container">
                {/* <button onClick={this.getDuanzi}>获取段子</button> */}
                <hr />
                <table border="1">
                    <thead>
                        <tr><th>ID</th><th>作者</th><th>段子内容</th></tr>
                    </thead>
                    <tbody>
                        {/* ctrl + / 可以快速注释 JSX */}
                        {/* <tr><td>1</td><td>xiaohigh</td><td>从前有个太监.....</td></tr> */}
                        {
                            this.state.duanzis.map(item => {
                                return <tr key={item.id}><td>{item.id}</td><td>{item.name}</td><td>{item.text}</td></tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }

    //生命周期回调  挂载完毕之后 发送请求
    async componentDidMount(){
        try{
            let {data} = await axios.get('http://api.xiaohigh.com:8090/duanzi');
            this.setState({
                duanzis: data
            })
        }catch(e) {
            console.log('网络异常, 请稍后再试!!');
        }
    }

    getDuanzi = async () => {
        //发送 AJAX
        // axios.get('http://api.xiaohigh.com:8090/duanzi')
        // .then(response => {
        //     // console.log(response.data);
        //     //将段子内容, 设置到 state 中的属性中
        //     this.setState({
        //         duanzis: response.data
        //     })
        // })
        //await 
        try{
            let {data} = await axios.get('http://api.xiaohigh.com:8090/duan');
            this.setState({
                duanzis: data
            })
        }catch(e) {
            console.log('网络异常, 请稍后再试!!');
        }
    }
}
